<template>
  <div>
    <!-- 报告样式设置 -->
    <el-card>
      <el-table :data="tableData" style="height: calc(100vh - 12rem)">
        <el-table-column prop="reportTitle" label="标题" align="center" />
        <el-table-column prop="name" label="联系人名称" align="center" />
        <el-table-column prop="phoneNumber" label="联系方式" align="center" />
        <el-table-column label="页眉" align="center">
          <template #default="{ row }">
            <el-image
              :src="row.headerImg"
              style="width: 100px; height: 100px; border-radius: 10px"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="页脚" align="center">
          <template #default="{ row }">
            <el-image
              :src="row.footerImg"
              style="width: 100px; height: 100px; border-radius: 10px"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button type="primary" link @click="openDrawer(row)">
              <el-icon><Edit /></el-icon>编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-drawer
      v-model="drawer"
      destroy-on-close
      :title="detailForm.id == 0 ? '新增报告样式' : '编辑报告样式'"
      size="40%"
    >
      <UpdateStyle :detailForm="detailForm" @handleBack="handleBack" />
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { cloneDeep } from "lodash";
import UpdateStyle from "./component/UpdateStyle.vue";
import { handleApiResponse } from "@/utils/request.js";
import { QueryStyleInfosByOrganId } from "../../../../../wailsjs/go/api/CustomerApi";
onMounted(() => {
  getList();
});

const tableData = ref([]);
async function getList() {
  handleApiResponse(() => QueryStyleInfosByOrganId()).then((res) => {
    if (res.code == 0) {
      tableData.value = res.data.list || [];
    }
  });
}

const drawer = ref(false);
const detailForm = ref({});
const openDrawer = (row) => {
  detailForm.value = cloneDeep(row);
  drawer.value = true;
};
const handleBack = (val) => {
  if (val == 1) {
    getList();
  }
  drawer.value = false;
};
</script>

<style scoped lang="scss">
</style>